<template>
    <div class="uiLayout">
        <div class="tagsBox">
            <div>
                <span class="title">姓名</span>
                <el-input v-model="tagsValue.uname" placeholder="请输入要查询的姓名" style="width: 300px;"/>
            </div>
            <div>
                <span class="title">手机号</span>
                <el-input v-model="tagsValue.phone" placeholder="请输入要查询的手机号" style="width: 300px;"/>
            </div>
    
            <div class="btn">
                <el-button type="primary" style="width:100%" @click="query">查询</el-button>
                <el-button type="primary" style="width:100%" @click="clear">清空查询</el-button>
            </div>
        </div>
    
        <el-card style="width:100%">
            <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%;border: none; border-radius: 8px;user-select:none"
                v-loading="loading" 
                element-loading-text="loading..." 
                element-loading-background="white"
            >
                <el-table-column property="id" label="ID" />
                <el-table-column property="name" label="姓名" />
                <el-table-column property="code" label="手机号" />
                <el-table-column property="create_time" label="创建时间">
                    <template #default="scope">
                        <span>{{ formatYMD(scope.row.create_time) }}</span>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="无数据" />
                </template>
            </el-table>
        </el-card>
    
        <el-card class="pagination" body-style="padding:0">
            <el-config-provider :locale="zhCn">
                <el-pagination  :page-size="10" 
                                @current-change="changePage"
                                layout="prev, pager, next, jumper" 
                                background 
                                :total="total"
                                prev-text="上一页"
                                next-text="下一页"
                                />
            </el-config-provider>
        </el-card>
        
    </div> 
</template>
    
<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { get } from '@/http/axios' 
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatYMD } from '@/utils/format'

const tagsValue = reactive({
    uname:null,
    phone:null
})
let id = ref<number | string>()
const store = useUserInfoStore()
let loading = ref<boolean>(true)
let tableData = ref()
let total = ref<number>(0)
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    initData()
})
function initData(pageNum: number = 1) {
    get('/admin/queryPage',{
        name: tagsValue.uname,
        code: tagsValue.phone,
        pageNum,
        pageSize: 10,
    }).then(res => {
        let timer = setTimeout(() => {
            clearTimeout(timer)
            tableData.value = res.result.content
            total.value = res.result.totalCount
            loading.value = false
        },500)
    }).catch(err => {
        ElMessage.error('订单信息加载失败' + err)
        
    })
}
function query() {
    loading.value = true
    initData()
}
function clear(){
    Object.keys(tagsValue).forEach(el => {
        tagsValue[el] = null
    })
}
function changePage(val:number){
    loading.value = true
    initData(val)
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.uiLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.imgBox{
    width: 200px;
    height: 100px;
    border-radius: 8px;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.btn{
    width: 350px !important;
}
</style>